<template>
    <div class="content">
        <div class="nav-tool">
            <u-icon
                name="arrow-left"
                color="#000000"
                size="20"
                @click="back"
                v-if="!showHome"
            ></u-icon>
            <u-icon size="22" color="#000000" name="home" @click="toHome" v-if="showHome"></u-icon>
            <p class="title">订座详情</p>
        </div>
        <div class="container">
            <div class="sub-item status">
                <div class="status-info">
                    <template
                        v-if="detail.status === 0 || detail.status === 1 || detail.status === 2"
                    >
                        <img class="icon" src="@/static/images/record/finish.png" />
                        <div class="right">
                            <div class="finish">
                                {{
                                    detail.status === 0
                                        ? '预定成功'
                                        : detail.status === 1
                                        ? '进行中'
                                        : '已完成'
                                }}
                            </div>
                            <p class="tips" v-if="detail.status === 0">座位已成功预留</p>
                        </div>
                    </template>
                    <template v-if="detail.status === 3 || detail.status === 4">
                        <img class="icon" src="@/static/images/record/closed.png" />
                        <div class="closed">{{ detail.status === 3 ? '已取消' : '已关闭' }}</div>
                    </template>
                </div>
                <p class="count-down" v-if="(diffDay > 0 || diffHour > 0) && detail.status === 0">
                    距离开始还有 <span v-if="diffDay > 0">{{ diffDay }} 天</span
                    ><span v-if="diffHour > 0">{{ diffHour }}小时</span>
                </p>
            </div>
            <div class="head-info" @click="toRoom">
                <div class="image">
                    <p class="name">{{ (detail.studyhallName || '').slice(0, 2) }}</p>
                    <div class="room">自习室</div>
                </div>
                <div class="center">
                    <p class="name">{{ detail.studyhallName || '' }}</p>
                    <p class="address">{{ detail.studyhallAddress || '' }}</p>
                </div>
                <u-icon color="#979797" size="14" name="arrow-right"></u-icon>
            </div>
            <div class="sub-item">
                <div class="head">
                    <div class="left">
                        <img class="icon-small" src="@/static/images/common/order.png" />
                        订座信息
                    </div>
                </div>
                <div class="order-info" v-if="detail.seatTypeName">
                    <img class="icon" src="@/static/images/common/table.png" />
                    <div class="label">区域桌号</div>
                    <div class="value">
                        {{ (detail.seatTypeName || '') + ' ' + (detail.seatNo || '') }}号
                    </div>
                </div>
                <div class="order-info">
                    <img class="icon" src="@/static/images/common/time.png" />
                    <div class="label">预约时间</div>
                    <div class="value">
                        {{ detail.reserveStartTime ? formatDate(detail.reserveStartTime) : '' }}
                        至{{ detail.reserveEndTime ? formatDate(detail.reserveEndTime) : '' }}
                        （
                        <span v-if="studyDay > 0">{{ studyDay }}天</span>
                        <span v-if="studyHour > 0">{{ studyHour }}小时</span>
                        ）
                    </div>
                </div>
                <div class="order-info" v-if="(detail.userCardNames || []).length > 0">
                    <img class="icon" src="@/static/images/common/card.png" />
                    <div class="label">支付方式</div>
                    <div class="value">{{ (detail.userCardNames || []).join(' ') }}</div>
                </div>
                <div class="order-info">
                    <img class="icon" src="@/static/images/common/code.png" />
                    <div class="label">订单编号</div>
                    <div class="value">{{ detail.no || '' }}</div>
                </div>
                <div class="order-info">
                    <img class="icon" src="@/static/images/common/time.png" />
                    <div class="label">下单时间</div>
                    <div class="value">
                        {{ detail.createTime ? formatTime(detail.createTime) : '' }}
                    </div>
                </div>
            </div>
            <div class="sub-item">
                <div class="head">
                    <div class="left">退改规则</div>
                </div>
                <p class="rule-info">
                    · 预定成功后，平台，<span class="blue">暂不支持修改订单</span
                    >，如您有时间调整等需求，请联系商家进行协商
                </p>
                <p class="rule-info">
                    ·
                    <span class="blue"
                        >{{
                            detail.reserveStartTime ? formatDay(detail.reserveStartTime) : ''
                        }}前</span
                    >
                    支持随时取消订单，取消后恢复卡券可再预约
                </p>
                <p class="rule-info">
                    ·
                    <span class="blue"
                        >{{
                            detail.reserveStartTime ? formatDay(detail.reserveStartTime) : ''
                        }}及之后14天内</span
                    >
                    支持线下退款，具体请联系商家。
                </p>
            </div>

            <div class="footer-bar">
                <div class="concat-business" @click="call">
                    <img class="phone" src="@/static/images/record/call.png" />
                    联系商家
                </div>
                <u-button
                    color="#5428EC"
                    plain
                    text="取消预约"
                    @click="cancelOrder"
                    v-if="detail.status === 0"
                    :customStyle="{ width: '252rpx', margin: 0 }"
                ></u-button>
            </div>
        </div>
    </div>
</template>

<script>
import dayjs from 'dayjs';
export default {
    name: 'order-detail',
    data() {
        return {
            id: null,
            showHome: false,
            detail: {},
            diffDay: 0,
            diffHour: 0,
            studyDay: 0,
            studyHour: 0,
        };
    },
    onLoad(options) {
        this.id = Number(options.id);
        if (options.type) {
            this.showHome = true;
        }
        this.getSeatDetail();
    },
    methods: {
        back() {
            uni.navigateBack();
        },
        toHome() {
            uni.switchTab({
                url: '/pages/home/index',
            });
        },
        getSeatDetail() {
            this.$Api.study.reserve
                .get({
                    id: this.id,
                })
                .then(res => {
                    this.detail = res;
                    this.diffDay = dayjs(this.formatTime(this.detail.reserveStartTime)).diff(
                        this.formatTime(new Date()),
                        'day',
                    );
                    let diffHour = dayjs(this.formatTime(this.detail.reserveStartTime)).diff(
                        this.formatTime(new Date()),
                        'hour',
                    );
                    let diffSecond = dayjs(this.formatTime(this.detail.reserveStartTime)).diff(
                        this.formatTime(new Date()),
                        'second',
                    );
                    this.diffHour = diffHour - this.diffDay * 24;
                    if (diffSecond > 0 && this.diffHour === 0) {
                        this.diffHour = 1;
                    }
                    this.studyDay = dayjs(this.formatTime(this.detail.reserveEndTime)).diff(
                        dayjs(this.formatTime(this.detail.reserveStartTime)),
                        'day',
                    );
                    let studyHour = dayjs(this.formatTime(this.detail.reserveEndTime)).diff(
                        dayjs(this.formatTime(this.detail.reserveStartTime)),
                        'hour',
                    );
                    this.studyHour = studyHour - this.studyDay * 24;
                });
        },
        formatTime(val) {
            return dayjs(val).format('YYYY-MM-DD HH:mm:ss');
        },
        formatDate(val) {
            return dayjs(val).format('YYYY-MM-DD HH:mm');
        },
        formatDay(val) {
            return dayjs(val).format('MM月DD日');
        },
        toRoom() {
            uni.navigateTo({
                url: '/pages/room/detail?id=' + this.detail.studyhallId,
            });
        },
        call() {
            uni.showModal({
                title: '提示',
                content: '是否呼叫该号码？',
                success: res => {
                    if (res.confirm) {
                        uni.makePhoneCall({
                            phoneNumber: this.detail.studyhallPhone,
                        });
                    }
                },
            });
        },
        cancelOrder() {
            let that = this;
            uni.showModal({
                title: '提示',
                content: '您确定要取消该订座吗？',
                success: res => {
                    if (res.confirm) {
                        that.$Api.study.reserve.cancel(that.id).then(() => {
                            uni.showToast({
                                title: '取消成功',
                                icon: 'none',
                            });
                            if (that.showHome) {
                                that.getSeatDetail();
                            } else {
                                uni.navigateBack();
                            }
                        });
                    }
                },
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.container {
    padding: 32rpx 30rpx 120rpx;
    .status {
        @include flexBox(space-between, center);
        .count-down {
            font-size: 24rpx;
            font-weight: 500;
            color: #ff5518;
        }
    }
    .head-info {
        padding: 26rpx 40rpx;
        background: #fff;
        border-bottom: 20rpx solid #f6f6f6;
        @include flexBox(flex-start, center);
        .image {
            width: 88rpx;
            height: 88rpx;
            background: #5428ec;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 32rpx;
            .name {
                text-align: center;
                color: #fff;
                font-size: 30rpx;
                padding: 10rpx 0;
            }
            .room {
                background: #e6dfff;
                font-size: 24rpx;
                color: #5428ec;
                padding-left: 6rpx;
            }
        }
        .center {
            flex: 1;
            .name {
                font-size: 28rpx;
                color: #2f2f2f;
            }
            .address {
                font-size: 28rpx;
                color: #898989;
                margin-top: 12rpx;
            }
        }
        .right {
        }
    }
    .sub-item {
        padding: 20rpx 32rpx;
        background: #fff;
        border-radius: 24rpx;
        margin-bottom: 20rpx;
        .head {
            padding-bottom: 12rpx;
            border-bottom: 1rpx solid #e5e5e5;
            @include flexBox(space-between, center);
            .left {
                font-size: 28rpx;
                font-weight: 600;
                color: #2f2f2f;
                @include flexBox(flex-start, center);
                .icon {
                    width: 48rpx;
                    height: 48rpx;
                    margin-right: 10rpx;
                }
                .icon-small {
                    width: 32rpx;
                    height: 32rpx;
                    margin-right: 10rpx;
                }
            }
            .status {
                font-size: 24rpx;
                font-weight: 600;
                color: #fa6400;
            }
        }
        .sub-info {
            margin-top: 18rpx;
            @include flexBox(space-between);
            .left {
                width: 180rpx;
                height: 180rpx;
                background: #ccc;
            }
            .right {
                flex: 1;
                height: 180rpx;
                margin-left: 24rpx;
                overflow: hidden;
                position: relative;
                @include flexBox(flex-start, flex-start, column);
                .name {
                    width: 80%;
                    font-size: 28rpx;
                    font-weight: 600;
                    color: #2f2f2f;
                    @include ellipsis(1);
                }
                .desc {
                    width: 80%;
                    font-size: 24rpx;
                    color: #898989;
                    margin-top: 12rpx;
                }
                .num {
                    font-size: 28rpx;
                    color: #898989;
                    position: absolute;
                    right: 0;
                    top: 50rpx;
                }
                .price {
                    width: 100%;
                    color: #2f2f2f;
                    position: absolute;
                    right: 0;
                    top: 0;
                    font-size: 28rpx;
                    @include flexBox(flex-end, center);
                    .unit {
                        margin-left: 10rpx;
                        font-weight: 600;
                        color: #2f2f2f;
                    }
                    .money {
                        font-weight: 600;
                        color: #2f2f2f;
                    }
                }
            }
        }
        .status-info {
            @include flexBox(flex-start, center);
            .icon {
                width: 48rpx;
                height: 48rpx;
                margin-right: 12rpx;
            }
            .finish {
                font-size: 28rpx;
                font-weight: 600;
                color: #109a28;
            }
            .tips {
                font-size: 24rpx;
                color: #898989;
            }
            .closed {
                font-size: 28rpx;
                font-weight: 600;
                color: #5c5c5c;
            }
        }
        .order-info {
            margin-top: 24rpx;
            @include flexBox(flex-start, flex-start);
            .icon {
                width: 32rpx;
                height: 32rpx;
                margin-right: 20rpx;
            }
            .label {
                font-size: 28rpx;
                color: #898989;
                white-space: nowrap;
            }
            .value {
                flex: 1;
                font-size: 28rpx;
                color: #2f2f2f;
                margin-left: 32rpx;
            }
        }
        .rule-info {
            font-size: 24rpx;
            color: #5c5c5c;
            line-height: 44rpx;
            .blue {
                color: #5672c2;
            }
        }
    }
    .footer-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 14rpx 30rpx;
        background: #fff;
        box-sizing: border-box;
        @include flexBox(space-between, center);
        .concat-business {
            width: 20%;
            height: 96rpx;
            color: #5c5c5c;
            font-size: 24rpx;
            @include flexBox(center, center, column);
            .phone {
                width: 64rpx;
                height: 64rpx;
            }
        }
    }
}
</style>
